<template>
  <div class="box">
    <div class="bg">
      <img width="100%" src="https://www.peugeot.com.cn/Cg/Upload/www.peugeot.com.cn/image/210827/2021082708105649036.jpg" alt="">
      <div class="userinfo">
        <van-image
            round
            fit="cover"
            width="100"
            height="100"
            :src="$store.state.n.headImgUrl"
        />
        <h4>{{ $store.state.n.nickName }}</h4>
        <div class="jifen">积分: {{ $store.state.n.integralPoint }}</div>
      </div>
    </div>
    <div class="bottom">
      <slot name="body">
        <h1>body</h1>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
.bg{
  position: relative;
  font-size: 0;
}
.userinfo{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  color: white;
  font-size: 16px;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
}
.userinfo h4{
  margin: 6px 0 8px 0;
}
.jifen{
  background-color: #c7bb73;
  max-width: 80px;
  padding: 2px 6px;
  font-size: 14px;
  border-radius: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bottom{
  width: 100%;
  border-radius: 30px 30px 0 0;
  background-color: #efebee;
  transform: translateY(-80px);
  padding-top: 30px;
}
</style>
